<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../../css/mypetstore.css" type="text/css" media="screen"/>
</head>
<body>

<div th:replace="jsp/common/top"></div>
<div id="Content">
<div id="Catalog">

    <form action="/account/editAccountOK" method="post">
        <h3>User Information</h3>
        <span th:if="${session.messageAccount!=null}">
            <p style="color: red;" th:text="${session.messageAccount}"></p>
        </span>

        <table>
            <tr>
                <td>User ID:</td>
                <td th:text="${session.loginAccount.getUserid()}"></td>
            </tr>
            <tr>
                <td>New password:</td>
                <td>
                    <input type="text" name="password" id="password">
                    <img id="right_password"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_password"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="passwordAvailability"></div>
                </td>
            </tr>
            <tr>
                <td>Repeat password:</td>
                <td>
                    <input type="text" name="repeatedPassword" id="repeatedPassword">
                    <img id="right_repeatedPassword"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_repeatedPassword"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="repeatedPasswordAvailability"></div>
                </td>
            </tr>

        </table>

        <!--个人信息-->
        <h3>Account Information</h3>

        <table>
            <tr>
                <td>First name:</td>
                <td><input type="text" id="firstName" name="firstName" th:value="${session.loginAccount.getFirstname()}"></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td><input type="text" id="lastName" name="lastName" th:value="${session.loginAccount.getLastname()}"></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td>
                    <input type="text" size="40" id="email" name="email" th:value="${session.loginAccount.getEmail()}">
                    <img id="right_email"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_email"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="emailAvailability"></div>
                </td>
            </tr>
            <tr>
                <td>Phone:</td>
                <td>
                    <input type="text" id="phone" name="phone" th:value="${session.loginAccount.getPhone()}">
                    <img id="right_phone"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_phone"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="phoneAvailability"></div>
                </td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td>
                    <input type="text" size="40" id="address1" name="address1" th:value="${session.loginAccount.getAddr1()}">
                    <img id="right_address1"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_address1"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="address1Availability"></div>
                </td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td>
                    <input type="text" size="40" id="address2" name="address2" th:value="${session.loginAccount.getAddr2()}">
                    <img id="right_address2"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_address2"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="address2Availability"></div>
                </td>
            </tr>
            <tr>
                <td>City:</td>
                <td>
                    <input type="text" id="city" name="city" th:value="${session.loginAccount.getCity()}">
                    <img id="right_city"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_city"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="cityAvailability"></div>
                </td>
            </tr>
            <tr>
                <td>State:</td>
                <td>
                    <input type="text" size="4" id="state" name="state" th:value="${session.loginAccount.getState()}">
                    <img id="right_state"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_state"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="stateAvailability"></div>
                </td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td>
                    <input type="text" size="10" id="zip" name="zip" th:value="${session.loginAccount.getZip()}">
                    <img id="right_zip"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_zip"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="zipAvailability"></div>
                </td>
            </tr>
            <tr>
                <td>Country:</td>
                <td>
                    <input type="text" size="15" id="country" name="country" th:value="${session.loginAccount.getFirstname()}">
                    <img id="right_country"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_country"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="countryAvailability"></div>
                </td>
            </tr>
        </table>
        <h3>Profile Information</h3>
        <table>
            <tr>
                <td>Language Preference:</td>
                <td>
                    <select id="languagePreference" name="languagePreference" value=${sessionScope.loginAccount.languagePreference}>
<!--                        <option value="english"  ${session.loginProfile.languagePreference == 'english' ? 'selected' : ''}>english</option>-->
                        <option value="english" th:selected="${session.loginProfile.getLangpref() == 'english'}">English</option>
                        <option value="chinese"  th:selected="${session.loginProfile.getLangpref() == 'chinese'}">chinese</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Favourite Category:</td>
                <td>
                    <select id="favouriteCategoryId" name="favouriteCategoryId">
                        <option value="BIRDS"  th:selected="${session.loginProfile.getFavcategory() == 'BIRDS'}">BIRDS</option>
                        <option value="CATS" th:selected="${session.loginProfile.getFavcategory() == 'CATS'}">CATS</option>
                        <option value="DOGS" th:selected="${session.loginProfile.getFavcategory() == 'DOGS'}">DOGS</option>
                        <option value="FISH" th:selected="${session.loginProfile.getFavcategory() == 'FISH'}">FISH</option>
                        <option value="REPTILE" th:selected="${session.loginProfile.getFavcategory() == 'REPTILES'}">REPTILES</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Enable MyList</td>
                <td>
                    <input type="checkbox" id="listOption" name="listOption" th:checked="${session.loginProfile.getMylistopt() == 1}">
                </td>

            </tr>
            <tr>
                <td>Enable MyBanner</td>
                <td>
                    <input type="checkbox" id="bannerOption" name="bannerOption" th:checked="${session.loginProfile.getBanneropt() == 1}">
                </td>
            </tr>
        </table>
        <input type="submit" value="Save Account Information" >
    </form>

    <a href="/order/myOrder">My Orders</a>
</div>
</div>
</body>
</html>
<script src="../../js/Account/editAccountCheck.js"></script>